<!DOCTYPE html>
<!--使用Thymeleaf模板引擎渲染的博客详情页-->
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<!DOCTYPE html>
<html>
<head>
    <title th:text="${configurations.get('websiteName')}+' | '+${pageName}">详情页</title>
    <!--    title：根据configurations.get('websiteName')和pageName动态生成网页标题。-->
    <meta name="description" th:content="${configurations.get('websiteDescription')}">
    <!--    meta：描述和视口信息。-->
    <meta content="width=device-width" name="viewport">
    <link rel="shortcut icon" th:href="@{${configurations.get('websiteIcon')}}"/>
    <link rel="stylesheet" th:href="@{/blog/amaze/css/base.css}">
    <!-- highlight -->
    <link rel="stylesheet" th:href="@{/blog/plugins/highlight/styles/paraiso-light.css}">
    <!--    link：加载网站图标和样式表。-->
    <style>
        /*style：内联样式，用于代码高亮和块引用的样式*/
        .hljs {
            background: none;
        }
        pre code {
            white-space: pre;
        }
        blockquote {
            border-left: 4px solid #42b983;
            padding: 10px 0px 10px 15px;
            color: #777;
            background-color: rgba(66, 185, 131, .1);
            max-width: 890px;
        }
    </style>
</head>

<body>
<div th:replace="blog/amaze/header::nav-fragment"></div>
<!--div th:replace：包含导航栏。-->
<header class="intro-header" th:fragment="header-fragment"
        th:style="'background-image:url(' + @{/blog/amaze/images/head.jpg} + ');'">
    <!--    header：背景图片动态设置。-->
    <div class="container">
        <div class="row">
            <div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1">
                <div class="post-heading">
                    <h1 th:text="${blogDetailVO.blogTitle}"></h1>
                    <!--                    h1：显示博客标题。-->
                    <span class="meta">
<!--                        span.meta：显示创建时间、评论数和浏览数。-->
                        <th:block th:text="${#dates.format(blogDetailVO.createTime, 'yyyy-MM-dd')}"></th:block> &nbsp;
                            <div class="comments-view" style="display: inline-block">
                                <a class="article-comments" href="#comments"><th:block
                                        th:text="${blogDetailVO.commentCount}"></th:block>条评论</a> &nbsp;
                                <th:block th:text="${blogDetailVO.blogViews}"></th:block>浏览
                            </div>
                            </span>
                    <div class="tags post-tags">
                        <!--                        div.tags：显示博客标签。-->
                        <th:block th:each="tag : ${blogDetailVO.blogTags}">
                            <a class="tag" rel="tag" th:href="@{'/tag/' + ${tag}}">
                                <th:block th:text="${tag}"></th:block>
                            </a>&nbsp;
                        </th:block>
                    </div>
                </div>
            </div>
        </div>
</header>
<!--主要内容-->
<div class="container">
    <div class="am-g am-g-fixed blog-fixed">
        <div class="am-u-lg-12 am-u-sm-12">
            <article class="am-article blog-article-p article-trigger">
                <!--                article：显示博客内容-->
                <div class="am-article-bd article-body" id="post-content">
                    <th:block th:utext="${blogDetailVO.blogContent}"/>
                    <!--                    th:block th:utext：未转义文本，显示博客内容。-->
                    <aside class="blog-rights clearfix">
                        <p>最终解释权归本系统所有</p>
                    </aside>
                </div>
            </article>
            <hr>
        </div>
    </div>
    <!--    评论区-->
    <aside class="comments" id="comments">
        <th:block th:if="${null != commentPageResult}">
            <th:block th:each="comment,iterStat : ${commentPageResult.list}">
                <!--                th:block th:each：遍历评论列表-->
                <article class="comment">
                    <!--                    article.comment：显示每条评论。-->
                    <header class="clearfix">
                        <img class="avatar" th:src="@{/blog/default/img/avatar.png}">
                        <div class="meta">
                            <h3 th:text="${comment.commentator}"></h3>
                            <span class="date">
                                       评论时间：<th:block
                                    th:text="${#dates.format(comment.commentCreateTime, 'yyyy-MM-dd HH:mm:ss')}"></th:block>
                            </span>
                        </div>
                    </header>
                    <div class="body">
                        <th:block th:text="${comment.commentBody}"></th:block>
                    </div>
                </article>
                <th:block th:unless="${#strings.isEmpty(comment.replyBody)}">
                    <!--                    th:block th:unless：显示回复内容。-->
                    <article class="comment reply">
                        <header class="clearfix">
                            <img style="float: left;border-radius: 100px;width: 50px;"
                                 th:src="@{${configurations.get('yourAvatar')}}">
                            <div class="meta2">
                                <h3 th:text="${configurations.get('yourName')}">stone</h3>
                                <span class="date">
                                        回复时间： <th:block
                                        th:text="${#dates.format(comment.replyCreateTime, 'yyyy-MM-dd HH:mm:ss')}"></th:block>
                                    </span>

                            </div>
                        </header>
                        <div class="reply-body">
                            <th:block th:text="${comment.replyBody}"></th:block>
                        </div>
                    </article>
                </th:block>
            </th:block>
        </th:block>
        <!--        分页导航-->
        <th:block th:if="${null != commentPageResult}">
            <ul class="am-pagination">
                <li th:class="${commentPageResult.currPage==1}?'disabled' : ''"><a
                        th:href="@{${commentPageResult.currPage==1}?'##':'/blog/'+${blogDetailVO.blogId}+'?commentPage=' + ${commentPageResult.currPage-1}+'#comments'}">&laquo;</a>
                </li>
                <li th:if="${commentPageResult.currPage-3 >=1}"><a
                        th:href="@{'/blog/'+${blogDetailVO.blogId}+'?commentPage=' + ${commentPageResult.currPage-3}+'#comments'}"
                        th:text="${commentPageResult.currPage -3}">1</a></li>
                <li th:if="${commentPageResult.currPage-2 >=1}"><a
                        th:href="@{'/blog/'+${blogDetailVO.blogId}+'?commentPage=' + ${commentPageResult.currPage-2}+'#comments'}"
                        th:text="${commentPageResult.currPage -2}">1</a></li>
                <li th:if="${commentPageResult.currPage-1 >=1}"><a
                        th:href="@{'/blog/'+${blogDetailVO.blogId}+'?commentPage=' + ${commentPageResult.currPage-1}+'#comments'}"
                        th:text="${commentPageResult.currPage -1}">1</a></li>
                <li class="active"><a href="#" th:text="${commentPageResult.currPage}">1</a></li>
                <li th:if="${commentPageResult.currPage+1 <=commentPageResult.totalPage}"><a
                        th:href="@{'/blog/'+${blogDetailVO.blogId}+'?commentPage=' + ${commentPageResult.currPage+1}+'#comments'}"
                        th:text="${commentPageResult.currPage +1}">1</a></li>
                <li th:if="${commentPageResult.currPage+2 <=commentPageResult.totalPage}"><a
                        th:href="@{'/blog/'+${blogDetailVO.blogId}+'?commentPage=' + ${commentPageResult.currPage+2}+'#comments'}"
                        th:text="${commentPageResult.currPage +2}">1</a></li>
                <li th:if="${commentPageResult.currPage+3 <=commentPageResult.totalPage}"><a
                        th:href="@{'/blog/'+${blogDetailVO.blogId}+'?commentPage=' + ${commentPageResult.currPage+3}+'#comments'}"
                        th:text="${commentPageResult.currPage +3}">1</a></li>
                <li th:class="${commentPageResult.currPage==commentPageResult.totalPage}?'disabled' : ''"><a
                        th:href="@{${commentPageResult.currPage==commentPageResult.totalPage}?'##' : '/blog/'+${blogDetailVO.blogId}+'?commentPage=' + ${commentPageResult.currPage+1}+'#comments'}">&raquo;</a>
                </li>
            </ul>
        </th:block>
    </aside>
    <!--    评论表单-->
    <th:block th:if="${blogDetailVO.enableComment==0}">
        <!--        th:block th:if：显示评论表单，当enableComment为0时显示。-->
        <aside class="create-comment" id="create-comment">
            <!--            aside.create-comment：评论表单，包含多个输入框和提交按钮。-->
            <hr>
            <h2><i class="fa fa-pencil"></i> 添加评论</h2>
            <table class="form" id="commentForm">
                <tbody>
                <tr>
                    <td>
                        <input id="blogId" name="blogId" th:value="${blogDetailVO.blogId}" type="hidden"></input>
                        <input id="commentator" name="commentator" placeholder="(*必填)姓名" type="text">
                    </td>
                </tr>
                <tr>
                    <td>
                        <input id="email" name="email" placeholder="(*必填)邮箱" type="email">
                    </td>
                </tr>
                <tr>
                    <td>
                        <input id="websiteUrl" name="websiteUrl" placeholder="网站地址(可不填)" type="text">
                    </td>
                </tr>
                <tr>
                    <td>
                        <input id="verifyCode" name="verifyCode" placeholder="(*必填)验证码" style="width:50%"
                               type="text">&nbsp;&nbsp;
                        <img alt="单击图片刷新！" class="pointer" onclick="this.src='/common/kaptcha?d='+new Date()*1"
                             style="margin-top: 15px; border-radius: 25px;"
                             th:src="@{/common/kaptcha}">
                    </td>
                </tr>
                <tr>
                    <td>
                        <textarea id="commentBody" name="commentBody" placeholder="(*必填)评论" rows="5"></textarea>
                    </td>
                </tr>
                <tr>
                    <td align="center" colspan="2">
                        <button class="submit am-btn am-btn-primary" id="commentSubmit"
                                type="submit">提交
                        </button>
                    </td>
                </tr>
                </tbody>
            </table>
        </aside>
    </th:block>
    <p class="back-top" id="back-top" style="display:none"><a href="#top"><span></span></a></p>
</div>

<footer th:replace="blog/amaze/footer::footer-fragment"></footer>
</body>
<!--script：引入JavaScript文件，并包含一些用于页面交互的脚本，例如滚动到顶部按钮、代码高亮和去除标题中的链接目标属性。-->
<script th:src="@{/blog/default/js/jquery.min.js}"></script>
<script th:src="@{/blog/plugins/highlight/highlight.pack.js}"></script>
<script th:src="@{/blog/plugins/comment/valid.js}"></script>
<script th:src="@{/blog/plugins/comment/comment.js}"></script>
<!-- sweetalert -->
<script th:src="@{/admin/plugins/sweetalert/sweetalert.min.js}"></script>
<script>
    $(function () {
        $("#back-top").hide();
        $(window).scroll(function () {
            if ($(this).scrollTop() > 300) {
                $('#back-top').fadeIn();
            } else {
                $('#back-top').fadeOut();
            }
        });
        // scroll body to 0px on click
        $('#back-top a').click(function () {
            $('body,html').animate({
                scrollTop: 0
            }, 800);
            return false;
        });

        $('pre code').each(function (i, block) {
            hljs.highlightBlock(block);
        });

        $('article h1, article h2, article h3, article h4, article h5').find('a').removeAttr('target')
    })
</script>
</html>
